<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Basic JSON Editor Example</title>
    <script src="../../dist/jsoneditor.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>

<div class="container">
    <h1>Test</h1>
    <label for="value-form-1">value form 1</label>
    <textarea id="value-form-1" cols="30" rows="10"></textarea>
    <label for="value-form-2">value form 2</label>
    <textarea id="value-form-2" cols="30" rows="10"></textarea>
    <button id="get-value-form-1">get value</button>
    <button id="get-value-form-2">get value</button>
    <div id='editor_holder_1'></div>
    <div id='editor_holder_2'></div>
</div>

<script>
  var editor1 = new JSONEditor(document.getElementById('editor_holder_1'), {
    schema: {
      "title": "some title",
      "type": "string",
      "enum": [
        "yes",
        "no",
        "nv"
      ],
      "options": {
        "enum_titles": [
          "Yes",
          "No",
          "Maybe"
        ],
        "grid_columns": 12
      },
      "format": "radio",
      "default": ""
    },
    theme: 'bootstrap4',
    disable_collapse: true,
    disable_edit_json: true,
    disable_properties: true,
    use_default_values: false,
    required_by_default: true,
    show_errors: 'always',
    disable_array_reorder: true,
    disable_array_delete_all_rows: true,
    disable_array_delete_last_row: true,
    keep_oneof_values: false,
    no_additional_properties: true,
    form_name_root: 'form_1'
  })

  var editor2 = new JSONEditor(document.getElementById('editor_holder_2'), {
    schema: {
      "title": "some title",
      "type": "string",
      "enum": [
        "yes",
        "no",
        "nv"
      ],
      "options": {
        "enum_titles": [
          "Yes",
          "No",
          "Maybe"
        ],
        "grid_columns": 12
      },
      "format": "radio",
      "default": ""
    },
    theme: 'bootstrap4',
    disable_collapse: true,
    disable_edit_json: true,
    disable_properties: true,
    use_default_values: false,
    required_by_default: true,
    show_errors: 'always',
    disable_array_reorder: true,
    disable_array_delete_all_rows: true,
    disable_array_delete_last_row: true,
    keep_oneof_values: false,
    no_additional_properties: true,
    form_name_root: 'form_2'
  })

  var valueForm1 = document.querySelector('#value-form-1');
  var valueForm2 = document.querySelector('#value-form-2');
  var getValueForm1 = document.querySelector('#get-value-form-1');
  var getValueForm2 = document.querySelector('#get-value-form-2');

  getValueForm1.addEventListener('click', function () {
    valueForm1.value = JSON.stringify(editor1.getValue());
  });

  getValueForm2.addEventListener('click', function () {
    valueForm2.value = JSON.stringify(editor2.getValue());
  });


</script>
</body>
</html>
